<template>
  <div class="mySelect_class">
    <div v-if="label" class="lable_sty">{{ label }}</div>
    <el-cascader
      ref="casader"
      v-model="inputValue"
      :options="options"
      :props="casprops"
      placeholder="行政等级"
      collapse-tags
      collapse-tags-tooltip
      clearable
      :show-all-levels="false"
      @change="emitInput"
    />
  </div>
</template>

<script setup>
import { ref, watch, toRefs } from "vue";
const casprops = { multiple: true };
let lable_width = ref("");
onMounted(() => {
  lable_width.value = props.lable_width;
});
const emit = defineEmits(["update:modelValue", "remoteMethod", "casChange"]);
let props = defineProps({
  value: {
    type: String,
    default: "",
  },
  label: {
    type: String,
  },
  lable_width: {
    type: String,
    default: "100px",
  },
  placeholder: {
    type: String,
    default: "",
  },
  clearable: {
    type: Boolean,
    default: true,
  },
  multiple: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: "large",
  },
  options: {
    type: Array,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  labelType: {
    type: Number,
    default: 1,
  },
  modelValue: Array,
  loading: Boolean,
});

// 监听文本框输入
const inputValue = ref(props.modelValue);
watch(
  () => props.modelValue,
  (newValue) => {
    console.log(newValue, "dddddd");
    inputValue.value = newValue;
  }
);
const emitInput = () => {
  console.log(inputValue.value, "1111");
  emit("update:modelValue", inputValue.value);
  emit("casChange", inputValue.value);
};
// const remoteMethod = (query) => {
//   emit("remoteMethod", query);
// };
</script>

<style lang="less" scoped>
// .lable_top {
//     width: v-bind(lable_width);
//     text-align: right;
//     font-size: 16px;
// }

.lable_sty {
  font-weight: normal !important;
  font-size: 16px;
  color: #606266;
  display: flex;
  align-items: center;
  justify-content: start;
  min-width: 80px !important;
  margin-right: 5px;
}

.mySelect_class {
  display: flex;
  align-items: center;
  font-size: 16px;
}
</style>
